<template>
  <div class="cinema">
    <van-nav-bar
      title="影院"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :fixed="true"
    >
      <template #left>
        {{ cityName }} <van-icon name="arrow-down" :color="'#191a1b'" style="margin-left: 2px;" />
      </template>
      <template #right>
        <van-icon name="search" size="24" :color="'#191a1b'" />
      </template>
    </van-nav-bar>

    <!-- <header class="flex justify-between bg-white">
      <div class="left"></div>
      <div class="title">影院</div>
      <div class="right">
        <router-link :to="{name: 'Search'}"><img src="@/assets/images/icon_search.png" alt=""></router-link>
      </div>
    </header> -->
    <div class="cinema-layer"></div>
    <div class="cinema-list-wrap">
      <ul class="cinema-list">
        <li v-for="item in cinemaList" :key="item.cinemaId">
          <!-- <router-link :to="{}"> -->
          <div class="cinema-item-warp flex justify-between">
            <div class="">
              <div class="cinemas-info">
                <span class="cinema-name ellipsis">{{ item.name }}</span>
                <span class="cinema-address ellipsis">{{ item.address }}</span>
              </div>
            </div>
            <div class="">
              <div class="cinema-price">
                <span class="cinema-lowPrice price-fmt">
                  <i>￥</i><span class="interge" style="font-size: 15px;">25</span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px;"></span>
                  <span style="display: none;">.</span>
                  <span class="decimal" style="font-size: 15px; display: none;">00</span>
                </span>
                <span class="upon">起</span>
              </div>
              <span class="cinema-gpsAddress">
                距离未知
              </span>
            </div>
          </div>
          <!-- </router-link> -->
        </li>
      </ul>
    <!-- <router-view></router-view> -->
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'

import Vue from 'vue'
import { mapState, mapMutations, mapActions } from 'vuex' // 映射出状态  export { mapState }
import { NavBar, Icon } from 'vant'

Vue.use(NavBar).use(Icon)

export default {
  name: 'Cinemas',
  data () {
    return {
      // cinemaList: this.$store.state.cinemaList
    }
  },
  computed: {
    // ... 将数组和对象展开
    ...mapState('CinemaModule', ['cinemaList']),
    ...mapState('CityModule', ['cityId', 'cityName'])
  },
  methods: {
    ...mapMutations('CinemaModule', ['clearCinemaList']),
    ...mapActions('CinemaModule', ['getCinemaList']),
    onClickLeft () {
      // 清空cinemaList
      // this.$store.commit('clearCinemaList')
      this.clearCinemaList()
      this.$router.push('/city')
    },
    onClickRight () {
      this.$router.push({ name: 'Search' })
    }
  },
  mounted () {
    // console.log(mapState('CinemaModule', ['cinemaList']))

    // if(this.$store.state.cinemaList && this.$store.state.cinemaList.length === 0) {
    if (this.cinemaList && this.cinemaList.length === 0) {
      // vuex 异步流程
      // 状态立即更改 ，但是dom异步渲染
      // this.$store.dispatch('getCinemaList', this.$store.state.cityId).then(() => {
      this.getCinemaList(this.cityId).then(() => {
        this.$nextTick(() => {
          /* eslint-disable no-new */
          new BetterScroll('.cinema-list-wrap', {
            scrollbar: {
              fade: true // 滚动的时候显示，不滚动的时候隐藏（滚动条会溢出滚动，添加position定位）
            }
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        /* eslint-disable no-new */
        new BetterScroll('.cinema-list-wrap', {
          scrollbar: {
            fade: true // 滚动的时候显示，不滚动的时候隐藏（滚动条会溢出滚动，添加position定位）
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
.cinema-layer {
  padding-top: 46px;
}
header {
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  @include border-b-1px(#ededed);
  position: fixed;
  z-index: 1000;
}
.cinema-list-wrap {
  // height: calc( 100vh - 1rem );
  height: calc( 100vh - 46px );
  overflow: hidden;
  position: relative; // 修正滚动条的位置
}
.cinema-list {
  li {
    padding: .14rem;
    background-color: #fff;
    @include border-b-1px(#ededed);
  }
}

.cinemas-info {
  width: calc(100vw - .84rem);
  span {
    display: block;
    width: 100%;
  }
}
.cinema-name {
  color: #191a1b;
  font-size: .15rem;
}

.cinema-price {
  font-size: .15rem;
  color: #ff5f16;
}
.cinema-address, .cinema-gpsAddress {
  display: block;
  font-size: .12rem;
  color: #797d82;
  margin-top: .02rem;
}
</style>
